<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>uploader</title>
    <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://docs.kissyui.com/1.4/source/guideline/templates/assets/com-prettify.css">
    <link rel="stylesheet" href="http://docs.kissyui.com/1.4/source/guideline/templates/assets/com.css">
    <script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="http://cdn.staticfile.org/prettify/r298/prettify.min.js"></script>
    <script src="http://g.tbcdn.cn/kissy/k/1.4.8/seed-min.js" data-config="{combine:true}"></script>
  </head>
  <body data-spy="scroll" data-target=".bs-docs-sidebar">
    <div id="header"><a href="http://docs.kissyui.com/" class="logo">kissy</a>
      <nav><a href="http://docs.kissyui.com/1.4/docs/html/coms.html">优秀组件推荐</a></nav>
    </div>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3 bs-docs-sidebar">
          <ul data-spy="affix" data-offset-top="0" class="nav nav-list bs-docs-sidenav"></ul>
        </div>
        <div class="span9 bs-docs-content">
          <h1 data-id="undefined" class="title">uploader</h1>
          <p class="author-wrapper"><span>组件有问题？旺旺联系作者：</span><a href="https://github.com/minghe" target="_blank" data-name="剑平" class="author"><img src="https://avatars.githubusercontent.com/u/724588?v=3&amp;s=60" alt="剑平"></a><span class="author-name">剑平</span>
          </p>
          <div class="common-link"><a href="../demo/index.html" target="_blank" class="demo">示例</a><a href="https://github.com/kissygalleryteam/uploader" target="_blank" class="source">源码</a></div>
          <p class="com-info"><span class="info-label">View</span><span data-com="uploader" class="J_View">12963</span></p>
          <p class="com-info"><span class="info-label">所属分类</span><a href="http://kpm.taobao.net/list/五星组件推荐">五星组件推荐</a><a href="http://kpm.taobao.net/list/表单">表单</a><span class="info-label tag-label">组件标签</span><a href="http://kpm.taobao.net/list/tag?tag=表单">表单</a>
          </p>
          <p class="com-info"><span class="info-label">kissy版本</span><span>1.4.X</span>
          </p><p>阿里的应用，直接使用通用接口即可，直接复制代码可用，详细请看<a href="http://www.atatech.org/article/detail/11632/348">AliUploader</a>（为了接口安全，使用内网地址）。使用通用接口的同学请将应用名发给剑平。</p>
<p>1.5新增跨终端上传的支持，详细请看<a href="http://www.atatech.org/article/detail/11802/786">《再谈跨终端上传实现》</a>，用到淘宝服务，资料放在内网。</p>
<p>1.5新增淘宝主客户端上传组件：<a href="http://www.atatech.org/article/detail/12316/786">NativeUploader</a>（内网资料，外部无法使用，基于WindVane环境）</p>
<h2 id="-">综述</h2>
<p>Uploader是Butterfly子组件，有问题可以加旺旺群：<em>733230474</em>。</p>
<p>Uploader是非常强大的异步文件上传组件，支持ajax、iframe、flash三套方案，实现浏览器的全兼容，调用非常简单，内置多套主题支持和常用插件，比如验证、图片预览、进度条等。</p>
<p>广泛应用于淘宝网，比如退款系统、爱逛街、二手、拍卖、我的淘宝、卖家中心、导购中心等。</p>
<p>拥有非常不错的扩展性，可以自己定制主题和插件。</p>
<ul>
<li>版本：2.0.2</li>
<li>基于：kissy1.4.2</li>
<li>作者：明河（剑平）、紫英、飞绿，感谢苏河、溪夏、正豪等主题和插件作者</li>
</ul>
<p>flash上传感谢龙藏的<code>ajbridge</code>组件。</p>
<h4 id="uploader-">Uploader的特性</h4>
<ul>
<li>支持ajax、flash、iframe三种方案，兼容所有浏览器。</li>
<li>多主题支持，可以自己定制主题</li>
<li>支持多选批量上传</li>
<li>支持上传进度显示</li>
<li>支持取消上传</li>
<li>支持图片预览（使用flash上传不支持）</li>
<li>支持上传验证</li>
<li>多种配置方式</li>
</ul>
<h2 id="demo-">demo汇总</h2>
<p><a href="http://uploader.apebook.org/">demo列表</a> 。</p>
<ul>
    <li><a href="http://uploader.apebook.org/js-config-use.html">简单demo：js配置上传组件</a></li>
    <li><a href="http://uploader.apebook.org/tag-config-use.html">简单demo：属性配置上传组件</a></li>
    <li><a href="http://uploader.apebook.org/auth.html">上传验证控制的demo</a></li>
    <li><a href="http://uploader.apebook.org/events.html">组件全部事件演示</a></li>
    <li><a href="http://uploader.apebook.org/default-data-show.html">渲染默认队列数据的demo</a></li>
    <li><a href="http://uploader.apebook.org/queue.html">队列全部方法演示</a></li>
    <li><a href="http://uploader.apebook.org/flash-upload-type.html">只使用flash上传的demo</a></li>
    <li><a href="http://uploader.apebook.org/iframe-upload-type.html">只使用iframe上传的demo</a></li>
    <li><a href="http://uploader.apebook.org/method-uploader.html">常用方法控制</a></li>
</ul>

<h2 id="-">组件内置的主题</h2>
<h3 id="-">图片上传主题</h3>
<table>
<thead>
<tr>
<th>主题</th>
<th>作者</th>
<th>源码</th>
<th>截图</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://uploader.apebook.org/theme-grayUploader.html">grayUploader</a>（V1.5新增）</td>
<td>明河/翰文</td>
<td><a href="https://github.com/kissygalleryteam/uploader/tree/master/2.0.2/themes/grayUploader">源码</a></td>
<td><img src="http://gtms03.alicdn.com/tps/i3/TB1RqL8FVXXXXbVXVXXGV5HNXXX-610-322.png" alt="grayUploader"></td>
</tr>
<tr>
<td><a href="http://uploader.apebook.org/theme-imageUploader.html">imageUploader</a></td>
<td>明河</td>
<td><a href="https://github.com/kissygalleryteam/uploader/tree/master/2.0.2/themes/imageUploader">源码</a></td>
<td><img src="http://gtms02.alicdn.com/tps/i2/TB1sjpLHXXXXXaUXVXXXpjhJXXX-356-178.png" alt="imageUploader"></td>
</tr>
<tr>
<td><a href="http://uploader.apebook.org/theme-refundUploader.html">refundUploader</a></td>
<td>明河</td>
<td><a href="https://github.com/kissygalleryteam/uploader/tree/master/2.0.2/themes/refundUploader">源码</a></td>
<td><img src="http://gtms01.alicdn.com/tps/i1/TB1yfdVHXXXXXXfXXXXnDo20pXX-318-136.png" alt="refundUploader"></td>
</tr>
<tr>
<td><a href="http://uploader.apebook.org/theme-loveUploader.html">loveUploader</a></td>
<td>苏河/明河</td>
<td><a href="https://github.com/kissygalleryteam/uploader/tree/master/2.0.2/themes/loveUploader">源码</a></td>
<td><img src="http://gtms02.alicdn.com/tps/i2/TB1kDVQHXXXXXbsXXXXNXLQ2XXX-428-151.png" alt="loveUploader"></td>
</tr>
<tr>
<td><a href="http://uploader.apebook.org/theme-singleImageUploader.html">singleImageUploader</a></td>
<td>溪夏/明河</td>
<td><a href="https://github.com/kissygalleryteam/uploader/tree/master/2.0.2/themes/singleImageUploader">源码</a></td>
<td><img src="http://gtms01.alicdn.com/tps/i1/TB1SHNUHXXXXXapXXXXC0XJ3XXX-191-216.png" alt="singleImageUploader"></td>
</tr>
<tr>
<td><a href="http://uploader.apebook.org/theme-cropUploader.html">cropUploader</a></td>
<td>明河、元泉</td>
<td><a href="https://github.com/kissygalleryteam/uploader/tree/master/2.0.2/themes/cropUploader">源码</a></td>
<td><img src="http://gtms04.alicdn.com/tps/i4/TB1l8JGHXXXXXcJaXXX.hYXWpXX-417-317.png" alt="cropUploader"></td>
</tr>
</tbody>
</table>
<h3 id="-">文件上传主题</h3>
<table>
<thead>
<tr>
<th>主题</th>
<th>作者</th>
<th>源码</th>
<th>截图</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://uploader.apebook.org/js-config-use.html">default</a></td>
<td>明河</td>
<td><a href="https://github.com/kissygalleryteam/uploader/tree/master/2.0.2/themes/default">源码</a></td>
<td><img src="http://gtms03.alicdn.com/tps/i3/TB1neXVHXXXXXXqXXXXavXEVpXX-278-131.png" alt="default"></td>
</tr>
<tr>
<td><a href="http://uploader.apebook.org/theme-daogouUploader.html">daogouUploader</a></td>
<td>溪夏/明河</td>
<td><a href="https://github.com/kissygalleryteam/uploader/tree/master/2.0.2/themes/daogouUploader">源码</a></td>
<td><img src="http://gtms01.alicdn.com/tps/i1/TB1h_XLHXXXXXaKXVXXIXDr2VXX-325-115.png" alt="daogouUploader"></td>
</tr>
</tbody>
</table>
<h2 id="-">组件快速上手</h2>
<h3 id="1-html-">1.组件依赖的html结构</h3>
<pre><code class="lang-xml">    &lt;input type=&quot;file&quot; class=&quot;g-u&quot; id=&quot;J_UploaderBtn&quot; value=&quot;上传文件&quot; name=&quot;Filedata&quot; accept=&quot;image/*&quot;  &gt;
</code></pre>
<p>组件的核心只依赖原生的文件上传域，<code>value</code>属性值为上传按钮的文案，<code>name</code>属性非常重要：服务器端获取文件数据的字段。</p>
<p>uploader1.5新增<code>accept=&quot;image/*&quot;</code>支持，这个属性可以在选择文件时过滤掉不支持上传的文件，非常实用，chrome/IE10/firefox都支持。</p>
<h3 id="2-uploader-">2.加载Uploader模块</h3>
<pre><code class="lang-javascript">    KISSY.use(&#39;kg/uploader/2.0.2/index&#39;, function (S, Uploader) {

    })
</code></pre>
<p><strong>提醒</strong>：use()的回调，第一个参数是KISSY，第二个参数才是组件实例。</p>
<h3 id="3-uploader">3.初始化Uploader</h3>
<pre><code class="lang-javascript">    KISSY.use(&#39;kg/uploader/2.0.2/index&#39;, function (S, Uploader) {
        var uploader = new Uploader(&#39;#J_UploaderBtn&#39;,{
          //处理上传的服务器端脚本路径
          action:&quot;upload.php&quot;
        });
    })
</code></pre>
<p>Uploader类接受二个参数：</p>
<ul>
<li>第一个参数指向目标元素（指向原生文件上传域元素即可）</li>
<li>第二个参数为组件配置，<code>action</code>必须配置，为服务器端处理文件上传的路径。</li>
</ul>
<p><strong>提醒</strong>：如果是使用flash上传，action必须是绝对路径。</p>
<p>打开页面就会发现文件上传域部分的结构发生了变化，html结构如下：</p>
<pre><code class="lang-xml">    &lt;a href=&quot;javascript:void(0)&quot; class=&quot;g-u ks-uploader-button&quot;&gt;
        &lt;span class=&quot;btn-text&quot;&gt;上传文件&lt;/span&gt;
        &lt;div class=&quot;file-input-wrapper&quot; style=&quot;overflow: hidden;&quot;&gt;
            &lt;input type=&quot;file&quot; name=&quot;Filedata&quot; hidefocus=&quot;true&quot; class=&quot;file-input&quot; style=&quot;&quot;&gt;
        &lt;/div&gt;
    &lt;/a&gt;
</code></pre>
<p>但缺少样式，也没办法处理上传行为，接下来我们加载一个默认主题。</p>
<h3 id="4-">4. 主题的使用</h3>
<pre><code class="lang-javascript">S.use(&#39;kg/uploader/2.0.2/index,kg/uploader/2.0.2/themes/default/index,kg/uploader/2.0.2/themes/default/style.css&#39;, function (S, Uploader,DefaultTheme) {
        var uploader = new Uploader(&#39;#J_UploaderBtn&#39;,{
                        //处理上传的服务器端脚本路径
                        action:&quot;upload.php&quot;
                    });
        //使用主题
        var defaultTheme = new DefaultTheme({ queueTarget:&#39;#J_UploaderQueue&#39; });
        uploader.theme(defaultTheme);
    })
</code></pre>
<p>第一步先要<code>use()</code>主题js和css，模块路径为<code>kg/uploader/2.0.2/themes/default/index</code>和<code>kg/uploader/2.0.2/themes/default/index</code>。</p>
<p>第二步实例化主题：</p>
<pre><code class="lang-javascript">var defaultTheme = new DefaultTheme({ queueTarget:&#39;#J_UploaderQueue&#39; });
</code></pre>
<p><code>queueTarget</code>是必须配置的，指向队列容器：</p>
<pre><code class="lang-xml">    &lt;ul id=&quot;J_JsUploaderQueue&quot;&gt;

    &lt;/ul&gt;
</code></pre>
<p>第三步使用<code>uploader.theme()</code>方法，将主题实例加入到uploader中。</p>
<pre><code class="lang-javascript">uploader.theme(defaultTheme);
</code></pre>
<p>再刷新下页面看看，就会发现已经有样式，并可以处理上传了（action指向的服务器路径可用的情况下）。</p>
<p>html结构上也发生了变化，模拟按钮上增加了<code>defaultTheme-button</code>样式，而ul队列容器上增加了<code>defaultTheme-queue</code>。</p>
<p>你可以通过这二个样式，来改变主题样式。</p>
<p>当然你也可以自定义自己的主题，后面会讲解到。</p>
<p>我们还需要加载一些uploader插件，才能让功能更完整，比如验证、预览等，继续往下看。</p>
<h3 id="4-">4. 服务器端返回的数据格式</h3>
<p>建议服务端返回的数据格式如下：</p>
<pre><code class="lang-javascript">   {&quot;status&quot;:1,&quot;type&quot;:&quot;ajax&quot;,&quot;name&quot;:&quot;[1343736002.749366]0.png&quot;,&quot;url&quot;:&quot;.\/files\/[1343736002.749366]0.png&quot;}
</code></pre>
<p><strong>提醒</strong>：去掉了Uploader1.3的<code>data</code>字段</p>
<p>留意引号！！！特别是键名要加<code>&quot;&quot;</code>，不然json会解析失败。</p>
<p><code>&quot;status&quot;:1</code>，才是上传成功的标识，其他任何状态码都认定为失败。</p>
<p><code>&quot;url&quot;:&quot;xxx&quot;</code>，一般是必须的，为文件上传到服务器后的路径。</p>
<p> <code>&quot;type&quot;:&quot;ajax&quot;</code>和<code>&quot;name&quot;:&quot;[1343736002.749366]0.png&quot;</code>并非必须的。</p>
<p> <strong>服务器出错时返回的信息</strong></p>
<pre><code class="lang-javascript">   {&quot;status&quot;:0,message&quot;:&quot;图片过大！&quot;}
</code></pre>
<p><strong>如果服务器返回的格式不是这样，你需要使用filter属性，格式化数据</strong></p>
<pre><code class="lang-javascript">    uploader.set(&#39;filter&#39;,function(data){
        if(result.message) result.msg = &#39;上传失败！&#39;;
        return result;
    });
</code></pre>
<h3 id="5-">5. 给上传组件增加验证</h3>
<p>验证功能是作为uploader的插件出现的，需要用户手动加载并初始化。</p>
<p>第一步加载插件js：</p>
<pre><code class="lang-javascript">    S.use(&#39;kg/uploader/2.0.2/plugins/auth/auth&#39;,function(S,Auth){

    })
</code></pre>
<p>第二步初始化插件：</p>
<pre><code class="lang-javascript">    var auth = new Auth({
       //最多上传个数
       max:3,
       //图片最大允许大小
       maxSize:100
   });
</code></pre>
<p>auth插件的配置，请看文章的插件部分。</p>
<p>第三步使用<code>plug()</code>将插件插入uploader：</p>
<pre><code class="lang-javascript">    uploader.plug(auth);
</code></pre>
<h3 id="6-url">6.存储服务器上传成功后返回的url</h3>
<p>上传成功后服务器会返回文件的url，供开发者后续操作，比如将url存储到数据库中，这个过程不需要用户自己写额外代码，加载Uploader的urlsInput插件即可。</p>
<p>插件的使用跟auth是一样的：</p>
<pre><code class="lang-javascript">    S.use(&#39;kg/uploader/2.0.2/plugins/urlsInput/urlsInput&#39;,function(S,UrlsInput){
        var urlsInput = new UrlsInput({target:&#39;#J_Urls&#39;});
        uploader.plug(urlsInput);
    })
</code></pre>
<p><code>target</code>指向用于存储的元素目标，一般是个隐藏域，比如：</p>
<pre><code class="lang-xml">    &lt;input type=&quot;hidden&quot; id=&quot;J_Urls&quot; name=&quot;urls&quot;&gt;
</code></pre>
<h3 id="7-">7.合并插件调用</h3>
<p>uploader的plug方法和theme方法是支持链式调用的。</p>
<pre><code class="lang-javascript">    S.use(&#39;kg/uploader/2.0.2/index,kg/uploader/2.0.2/themes/default/index,kg/uploader/2.0.2/themes/default/style.css&#39;, function (S, Uploader,DefaultTheme) {
            //上传组件插件
            var plugins = &#39;kg/uploader/2.0.2/plugins/auth/auth,&#39; +
                    &#39;kg/uploader/2.0.2/plugins/urlsInput/urlsInput,&#39; +
                    &#39;kg/uploader/2.0.2/plugins/proBars/proBars&#39;;

            S.use(plugins,function(S,Auth,UrlsInput,ProBars){
                var uploader = new Uploader(&#39;#J_UploaderBtn&#39;,{
                    //处理上传的服务器端脚本路径
                    action:&quot;upload.php&quot;
                });
                //使用主题
                uploader.theme(new DefaultTheme({
                    queueTarget:&#39;#J_UploaderQueue&#39;
                }))
                        //验证插件
                uploader.plug(new Auth({
                            //最多上传个数
                            max:3,
                            //图片最大允许大小
                            maxSize:100
                        }))
                         //url保存插件
                        .plug(new UrlsInput({target:&#39;#J_Urls&#39;}))
                        //进度条集合
                        .plug(new ProBars())
                ;
            });
        })
</code></pre>
<p>uploader拥有非常丰富的插件，用户可以根据自己的需要加载和初始化指定的插件，详细内容请看下面的插件部分。</p>
<h2 id="-">组件事件说明</h2>
<table class="table table-bordered table-striped">
    <thead>
    <tr>
        <th style="width: 100px;">事件名</th>
        <th>描述</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>select </td>
        <td>选择完文件后触发</td>
    </tr>
    <tr>
        <td>add </td>
        <td>向队列添加完文件后触发</td>
    </tr>
    <tr>
        <td>start </td>
        <td>开始上传后触发</td>
    </tr>
    <tr>
        <td>progress </td>
        <td>正在上传中时触发，这个事件在iframe上传方式中不存在</td>
    </tr>
    <tr>
        <td>success  </td>
        <td>上传成功后触发</td>
    </tr>
    <tr>
        <td>error </td>
        <td>上传失败后触发</td>
    </tr>
    <tr>
        <td>cancel </td>
        <td>取消上传后触发</td>
    </tr>
    <tr>
        <td>remove </td>
        <td>删除队列中的图片后触发</td>
    </tr>
    </tbody>
</table>

<p><strong>提醒</strong>：如果你需要操作队列容器中的dom结构，需要监听<code>add</code>事件，比如：</p>
<pre><code class="lang-javascript">    uploader.on(&#39;add&#39;,function(ev){
        var file = ev.file;
        var target = file.target;
        target.addClass(&#39;test&#39;);
    });
</code></pre>
<p>所有的事件参数都包含<code>ev.file</code>对象存储着文件数据。</p>
<p><code>ev.file.target</code>指向队列容器中的每一个文件对应的DOM节点。</p>
<p><code>ev.index</code>为文件在队列中的索引值，经常会用到。</p>
<h4 id="success-error-">success事件和error事件</h4>
<p>这二个事件也经常用到，事件参数都包含服务器返回的结果集。</p>
<pre><code class="lang-javascript">    uploader.on(&#39;success&#39;, function (ev) {
        var index = ev.index, file = ev.file;
        //服务器端返回的结果集
        var result = ev.result;
        S.log(&#39;上传成功,服务器端返回url：&#39; + result.url);
    });
</code></pre>
<pre><code class="lang-javascript">    uploader.on(&#39;error&#39;, function (ev) {
        var index = ev.index, file = ev.file;
        //服务器端返回的结果集
        var result = ev.result;
        S.log( &#39;上传失败,错误消息为：&#39; +result.msg);
    });
</code></pre>
<p><strong>提醒</strong>：如果是前端验证触发的error事件，不会有result数据</p>
<h2 id="-">组件属性说明</h2>
<h4 id="-">获取/设置属性</h4>
<p>使用get()/set()来获取设置属性，举例：</p>
<pre><code class="lang-javascript">    uploader.on(&#39;themeRender&#39;, function (ev) {
        var queue = uploader.get(&#39;queue&#39;);
        //队列中所有的文件数据
        S.log(queue.get(&#39;files&#39;));
       //禁用按钮
        uploader.set(&#39;disabled&#39;,true);
    });
</code></pre>
<h4 id="-">常用指数：<strong>*</strong></h4>
<table class="table table-bordered table-striped">
    <thead>
    <tr>
        <th style="width: 100px;">参数名</th>
        <th style="width: 50px;">类型</th>
        <th style="width: 130px;">默认值</th>
        <th style="width: 200px;">是否只读</th>
        <th>描述</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>action</td>
        <td>String</td>
        <td>&#39;&#39;</td>
        <td>读/写</td>
        <td>服务器端处理上传的路径（v1.3.0+）
        </td>
    </tr>
    <tr>
        <td>data</td>
        <td>Object</td>
        <td>{}</td>
        <td>读/写</td>
        <td>此配置用于动态修改post给服务器的数据（v1.3.0+）
        </td>
    </tr>
    <tr>
        <td>name</td>
        <td>String</td>
        <td>Filedata</td>
        <td>只读</td>
        <td>文件上传域name名
        </td>
    </tr>
    <tr>
        <td>autoUpload</td>
        <td>Boolean</td>
        <td>true</td>
        <td>读/写</td>
        <td>是否自动上传，当为<code>false</code>时，可以通过uploader的<code>upload()</code>和<code>uploadFiles()</code>手动上传队列中的文件。</td>
    </tr>
    <tr>
        <td>multiple</td>
        <td>Boolean</td>
        <td>false</td>
        <td>读/写</td>
        <td>是否开启多选支持
            <div class="alert alert-info">如果采用iframe上传，请设置为<code>false</code></div>
        </td>
    </tr>
    <tr>
        <td>disabled</td>
        <td>Boolean</td>
        <td>false</td>
        <td>读/写</td>
        <td>是否可用,false为按钮可用</td>
    </tr>
    <tr>
        <td>filter</td>
        <td>Function</td>
        <td>&quot;&quot;</td>
        <td>写</td>
        <td>用于格式化服务器端返回的数据
        </td>
    </tr>

    </tbody>
    </table>

<h4 id="-">常用指数：<em>**</em></h4>
<table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th style="width: 100px;">属性名</th>
            <th style="width: 50px;">类型</th>
            <th style="width: 130px;">默认值</th>
            <th style="width: 200px;">是否只读</th>
            <th>描述</th>
        </tr>
        </thead>
        <tbody>
             <tr>
                 <td>target</td>
                 <td>NodeList</td>
                 <td>&#39;&#39;</td>
                 <td>只读</td>
                 <td>
                     上传组件的目标元素，当组件初始化成功后会指向模拟按钮
                 </td>
             </tr>
             <tr>
                 <td>fileInput</td>
                 <td>NodeList</td>
                 <td>&#39;&#39;</td>
                 <td>只读</td>
                 <td>
                     模拟按钮内的文件上传input(type=&quot;file&quot;)，如果是flash上传此项不存在
                 </td>
             </tr>
             <tr>
                 <td>queue</td>
                 <td>Queue</td>
                 <td>&#39;&#39;</td>
                 <td>只读</td>
                 <td>
                     队列的实例，对队列的操作都集中在这个实例上
                 </td>
             </tr>
             <tr>
                  <td>type</td>
                  <td>Queue</td>
                  <td>&#39;&#39;</td>
                  <td>只读</td>
                  <td>
                      采用的上传方案，当值是数组时，比如“type” : [&quot;flash&quot;,&quot;ajax&quot;,&quot;iframe&quot;]，按顺序获取浏览器支持的方式，该配置会优先使用flash上传方式，如果浏览器不支持flash，会降级为ajax，如果还不支持ajax，会降级为iframe；当值是字符串时，比如“type” : “ajax”，表示只使用ajax上传方式。这种方式比较极端，在不支持ajax上传方式的浏览器会不可用；当“type” : “auto”，auto是一种特例，等价于[&quot;ajax&quot;,&quot;iframe&quot;]。
                  </td>
              </tr>
             <tr>
                 <td>isAllowUpload</td>
                 <td>Boolean</td>
                 <td>true</td>
                 <td>只读</td>
                 <td>
                     是否允许上传文件
                 </td>
             </tr>
             <tr>
                 <td>curUploadIndex</td>
                 <td>Number</td>
                 <td>&quot;&quot;</td>
                 <td>只读</td>
                 <td>
                     当前上传的文件对应的在数组内的索引值，如果没有文件正在上传，值为空
                 </td>
             </tr>
             <tr>
                 <td>multipleLen</td>
                 <td>Number</td>
                 <td>-1</td>
                 <td>只读</td>
                 <td>
                     用于限制多选文件个数，值为负时不设置多选限制
                 </td>
             </tr>

        </tbody>
</table>

<h4 id="-">常用指数：<em>*</em></h4>
<table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th style="width: 100px;">属性名</th>
            <th style="width: 50px;">类型</th>
            <th style="width: 130px;">默认值</th>
            <th style="width: 200px;">是否只读</th>
            <th>描述</th>
        </tr>
        </thead>
        <tbody>
             <tr>
                 <td>theme</td>
                 <td>Theme</td>
                 <td>&#39;&#39;</td>
                 <td>只读</td>
                 <td>
                     主题类实例
                 </td>
             </tr>
             <tr>
                 <td>btnTpl</td>
                 <td>Theme</td>
                 <td></td>
                 <td>只读</td>
                 <td>
                      模拟按钮模版
                 </td>
             </tr>
             <tr>
                  <td>swfSize</td>
                  <td>Object</td>
                  <td>{}</td>
                  <td>只读</td>
                  <td>
                  强制设置flash的尺寸，只有在flash上传方式中有效，比如{width:100,height:100}，默认为自适应按钮容器尺寸
                  </td>
              </tr>
        </tbody>
</table>

<h2 id="uploader-">Uploader方法说明</h2>
<h4 id="upload-index-">upload (index)：上传指定队列索引的文件</h4>
<pre><code class="lang-javascript">//上传队列中的第一个文件
uploader.upload(0)
</code></pre>
<h4 id="uploadfiles-status-">uploadFiles (status)：批量上传队列中的指定状态下的文件</h4>
<pre><code class="lang-javascript">//上传队列中所有等待的文件
uploader.uploadFiles(&quot;waiting&quot;)
</code></pre>
<h4 id="cancel-index-">cancel  (index)：取消文件上传</h4>
<p>当index参数不存在时取消当前正在上传的文件的上传。cancel并不会停止其他文件的上传（对应方法是stop）。</p>
<pre><code class="lang-javascript">//取消当前正在上传的文件的上传
uploader.cancel();
</code></pre>
<h4 id="stop-">stop()：停止上传动作</h4>
<pre><code class="lang-javascript">//停止上传
uploader.stop();
</code></pre>
<h4 id="theme-">theme():运行主题实例</h4>
<pre><code class="lang-javascript">uploader.theme(new DefaultTheme({
    queueTarget:&#39;#J_UploaderQueue&#39;
}))
</code></pre>
<h4 id="plug-uploader-">plug():将插件插入到uploader中</h4>
<pre><code class="lang-javascript">//验证插件
uploader.plug(new Auth({
        //最多上传个数
        max:3,
        //图片最大允许大小
        maxSize:100
    }))
     //url保存插件
    .plug(new UrlsInput({target:&#39;#J_Urls&#39;}))
</code></pre>
<h4 id="getplugin-pluginname-">getPlugin(pluginName):获取插件</h4>
<pre><code class="lang-javascript">//验证插件
uploader.getPlugin(&#39;auth&#39;);
</code></pre>
<p>插件名称可以对照插件的模块路径上的名称<code>kg/uploader/2.0.2/plugins/auth/auth</code>。</p>
<h2 id="queue-">Queue的控制说明</h2>
<p>Queue用于控制队列的文件，非常常用，实例存储在Uploader中。</p>
<pre><code class="lang-javascript">var queue = uploader.get(&#39;queue&#39;);
</code></pre>
<h4 id="queue-files-">Queue的files属性</h4>
<p>queue的属性只有<code>files</code>，可以获取到所有上传的文件数据，为一个数组。</p>
<pre><code class="lang-javascript">var queue = uploader.get(&#39;queue&#39;);
var files = queue.get(&#39;files&#39;);
S.log(files.length);
</code></pre>
<h4 id="add-">add():向队列添加文件</h4>
<pre><code class="lang-javascript">//测试文件数据
var testFile = {&#39;name&#39;:&#39;test.jpg&#39;,
    &#39;size&#39;:2000,
    &#39;input&#39;:{},
    &#39;file&#39;:{&#39;name&#39;:&#39;test.jpg&#39;, &#39;type&#39;:&#39;image/jpeg&#39;, &#39;size&#39;:2000}
};
//向队列添加文件
var file = queue.add(testFile);
S.log(&#39;添加的文件数据为：&#39;+file);
</code></pre>
<p>当组件向队列添加文件时，会自动生成一个唯一id，比如&#39;file-10&#39;，&#39;file-&#39;前缀是一样的，可以通过id来获取指定的文件。</p>
<h4 id="remove-">remove():删除队列中的文件</h4>
<pre><code class="lang-javascript">var removeFile = queue.remove(0);
S.log(&#39;删除的文件数据为：&#39;+removeFile);
</code></pre>
<p><strong>提醒</strong>：remove()的参数可以是队列数组的索引，比如上面代码的0，是取队列第一个文件数据；也可以是文件的id（唯一），比如remove(&#39;file-26&#39;)。</p>
<h4 id="clear-">clear():删除队列内的所有文件</h4>
<pre><code class="lang-javascript">    queue.clear();
</code></pre>
<h4 id="getfiles-status-">getFiles(status):获取指定状态下的文件</h4>
<pre><code class="lang-javascript">var files = queue.getFiles(&#39;waiting&#39;),
        ids = [];
S.each(files, function (file) {
    ids.push(file.id);
});
alert(&#39;所有等待中的文件id为：&#39; + ids);
</code></pre>
<h4 id="getindexs-type-">getIndexs(type):获取等指定状态的文件对应的文件数组索引值组成的数组</h4>
<pre><code class="lang-javascript">var indexs = queue.getIndexs(&#39;waiting&#39;);
alert(&#39;所有等待中的文件index为：&#39; + indexs);
</code></pre>
<p>getFiles()和getIndexs()的作用是不同的，getFiles()类似过滤数组，获取的是指定状态的文件数据，而getIndexs()只是获取指定状态下的文件对应的在文件数组内的索引值。</p>
<h2 id="theme-">Theme说明</h2>
<h4 id="theme-">Theme的使用</h4>
<p>使用<code>theme()</code>方法初始化主题逻辑，代码如下：</p>
<pre><code class="lang-javascript">    uploader.theme(new DefaultTheme({
        queueTarget:&#39;#J_UploaderQueue&#39;
    }))
</code></pre>
<h4 id="-">如何理解主题的概念</h4>
<p>Uploader的主题包含二个部分：脚本（index.js）和样式（style.css）。</p>
<p>主题的脚本可以理解为uploader事件监听器集合，主题脚本的模版如下：</p>
<pre><code class="lang-javascript">KISSY.add(function (S, Node, ImageUploader) {
    var EMPTY = &#39;&#39;, $ = Node.all;

    /**
     * @name RefundUploader
     * @class 退款凭证上传主题，继承于imageUploader主题
     * @constructor
     * @extends Theme
     * @requires Theme
     * @requires  ProgressBar
     * @author 明河
     */
    function RefundUploader(config) {
        var self = this;
        //调用父类构造函数
        RefundUploader.superclass.constructor.call(self, config);
    }

    S.extend(RefundUploader, ImageUploader, /** @lends RefundUploader.prototype*/{
        /**
         * 在上传组件运行完毕后执行的方法（对上传组件所有的控制都应该在这个函数内）
         * @param {Uploader} uploader
         */
        render:function () {
            var self = this;
            var uploader = self.get(&#39;uploader&#39;);
        },
        /**
         * 在完成文件dom插入后执行的方法
         * @param {Object} ev 类似{index:0,file:{},target:$target}
         */
        _addHandler:function(ev){

        },
         /**
         * 文件处于上传错误状态时触发
         */
        _errorHandler:function (ev) {

        }
    }, {ATTRS:/** @lends RefundUploader.prototype*/{
        name:{value:&#39;refundUploader&#39;}
    }});
    return RefundUploader;
}, {requires:[&#39;node&#39;, &#39;kg/uploader/2.0.2/themes/imageUploader/index&#39;]});
</code></pre>
<p>主题中的<code>_errorHandler</code>，在上传失败时会自动触发，当然像&quot;_addHandler&quot;或&quot;_successHandler&quot;也是一样的道理。</p>
<h4 id="theme-">Theme的属性</h4>
<table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th style="width: 100px;">属性名</th>
            <th style="width: 50px;">类型</th>
            <th style="width: 130px;">默认值</th>
            <th style="width: 200px;">是否只读</th>
            <th>描述</th>
        </tr>
        </thead>
        <tbody>
             <tr>
                 <td>name</td>
                 <td>String</td>
                 <td>&#39;&#39;</td>
                 <td>只读</td>
                 <td>
                    主题名，是主题对应的模拟按钮和队列容器的样式名的前缀
                 </td>
             </tr>
              <tr>
                  <td>fileTpl</td>
                  <td>String</td>
                  <td>&#39;&#39;</td>
                  <td>只读</td>
                  <td>
                  主题模版，用于定制主题的DOM样式
                  </td>
              </tr>
              <tr>
                  <td>authMsg</td>
                  <td>Object</td>
                  <td>{}</td>
                  <td>只读</td>
                  <td>
                  验证插件的消息文案
                  </td>
              </tr>
              <tr>
                  <td>allowExts</td>
                  <td>String</td>
                  <td>&#39;&#39;</td>
                  <td>只读</td>
                  <td>
                    文件格式限制
                  </td>
              </tr>
              <tr>
                  <td>queueTarget</td>
                  <td>NodeList</td>
                  <td>&#39;&#39;</td>
                  <td>只读</td>
                  <td>
                    队列容器目标元素
                  </td>
              </tr>
              <tr>
                  <td>uploader</td>
                  <td>Uploader</td>
                  <td>&#39;&#39;</td>
                  <td>只读</td>
                  <td>
                    Uploader的实例
                  </td>
              </tr>
        </tbody>
</table>

<h4 id="-html-">在html页面直接写主题模版</h4>
<p>这是1.5新增功能，用于用户可以更直观的控制主题模版。</p>
<pre><code class="lang-javascript">&lt;ul id=&quot;J_JsUploaderQueue&quot;&gt;
      &lt;script type=&quot;text/uploader-theme&quot;&gt;
                  &lt;li id=&quot;queue-file-{id}&quot; class=&quot;g-u&quot; data-name=&quot;{name}&quot;&gt;
                      &lt;div class=&quot;pic-wrapper&quot;&gt;
                         &lt;div class=&quot;pic&quot;&gt;
                             &lt;span&gt;&lt;img class=&quot;J_Pic_{id} preview-img&quot; src=&quot;&quot; /&gt;&lt;/span&gt;
                         &lt;/div&gt;
                         &lt;div class=&quot; J_Mask_{id} pic-mask&quot;&gt;&lt;/div&gt;
                         &lt;div class=&quot;status-wrapper J_FileStatus&quot;&gt;
                             &lt;div class=&quot;status waiting-status&quot;&gt;&lt;p&gt;等待上传&lt;/p&gt;&lt;/div&gt;
                             &lt;div class=&quot;status start-status progress-status success-status&quot;&gt;
                                 &lt;div class=&quot;J_ProgressBar_{id}&quot;&gt;上传中...&lt;/div&gt;
                             &lt;/div&gt;
                             &lt;div class=&quot;status error-status&quot;&gt;
                                 &lt;p class=&quot;J_ErrorMsg_{id}&quot;&gt;上传失败，请重试！&lt;/p&gt;&lt;/div&gt;
                         &lt;/div&gt;
                     &lt;/div&gt;&#39;+
                     &lt;div&gt;
                         &lt;a class=&quot;J_Del_{id} del-pic&quot; href=&quot;#&quot;&gt;删除&lt;/a&gt;
                     &lt;/div&gt;
                 &lt;/li&gt;&#39;
      &lt;/script&gt;
&lt;/ul&gt;
</code></pre>
<p>模版代码必须包含在<code>script</code>标签内</p>
<pre><code class="lang-javascript">&lt;script type=&quot;text/uploader-theme&quot;&gt;
&lt;/script&gt;
</code></pre>
<h4 id="-">如何自己写一套主题？</h4>
<p>//TODO:日后补充</p>
<h2 id="-">插件说明</h2>
<p><strong>如何获取插件呢？</strong></p>
<pre><code class="lang-javascript">    var auth = uploader.getPlugin(&#39;auth&#39;);
    //只允许上传一个文件
    auth.set(&#39;max&#39;,1);
</code></pre>
<p><strong>如何自己写一个uploader的插件呢？</strong></p>
<p>//TODO:日后补充</p>
<h3 id="auth-">auth：表单验证</h3>
<h4 id="-">配置项（属性）</h4>
<table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th style="width: 100px;">属性名</th>
            <th style="width: 50px;">类型</th>
            <th style="width: 130px;">默认值</th>
            <th style="width: 200px;">是否只读</th>
            <th>描述</th>
        </tr>
        </thead>
        <tbody>
             <tr>
                 <td>allowExts</td>
                 <td>String</td>
                 <td>&#39;&#39;</td>
                 <td>读/写</td>
                 <td> 图片格式验证控制 </td>
             </tr>
             <tr>
                 <td>required</td>
                 <td>Boolean</td>
                 <td>&#39;&#39;</td>
                 <td>读/写</td>
                 <td> 必须至少上传一个文件 <div class="alert alert-info">组件默认不触发，可以使用uploader的testRequired()方法手动验证。</div></td>
             </tr>
             <tr>
                 <td>max</td>
                 <td>Number</td>
                 <td>&#39;&#39;</td>
                 <td>读/写</td>
                 <td>最多上传N个图片，当达到N个图片后按钮会增加禁用样式<code>uploader-button-disabled</code>，用户可以通过这个样式名定制需要的置灰样式。 </td>
             </tr>
             <tr>
                 <td>maxSize</td>
                 <td>Number</td>
                 <td>&#39;&#39;</td>
                 <td>读/写</td>
                 <td>单图片最大允许上传的文件大小，单位是<code>KB</code> <div class="alert alert-info">如果是iframe上传方式，此验证无效。</div></td>
             </tr>
             <tr>
                 <td>allowRepeat</td>
                 <td>Boolean</td>
                 <td>&#39;&#39;</td>
                 <td>读/写</td>
                 <td>是否允许多次上传同一个文件</td>
             </tr>
             <tr>
                 <td>widthHeight</td>
                 <td>Array</td>
                 <td>&#39;&#39;</td>
                 <td>读/写</td>
                 <td>v1.5新增的验证规则，用于限制图片尺寸，非常特殊的验证方式：1.异步验证；2.值为一个函数数组[fnWidth,fnHeight]，比如限制宽度大于60，高度大于160，代码如下：

                        widthHeight:function(width,height){
                            return width &gt; 160 &amp;&amp; height &gt; 160;
                        }
                 </td>
             </tr>
             <tr>
                 <td>msg</td>
                 <td>Object</td>
                 <td>{}</td>
                 <td>读/写</td>
                 <td>验证的消息集合，请使用msg()方法来设置消息</td>
             </tr>
        </tbody>
</table>

<h4 id="auth-">auth的方法</h4>
<p><strong>msg(rule,msg)</strong>：获取/设置验证消息</p>
<pre><code class="lang-javascript">    var auth = uploader.getPlugin(&#39;auth&#39;);
    //设置max规则消息
    auth.msg(&#39;max&#39;,&#39;每次最多上传{max}个文件！&#39;);
    //获取max消息
    S.log(auth.msg(&#39;max&#39;));
</code></pre>
<p><strong>testRequired()</strong>：检验是否已经上传了至少一个文件</p>
<pre><code class="lang-javascript">    var auth = uploader.getPlugin(&#39;auth&#39;);
    var isPass = auth.testRequired();
    S.log(isPass);
</code></pre>
<p>其他的规则一样拥有test方法（&quot;test+规则名()&quot;）。</p>
<h4 id="auth-">auth的事件</h4>
<p>当校验不通过是auth会触发uploader的error事件：</p>
<pre><code class="lang-javascript">uploader.on(&#39;error&#39;,function(ev){
    S.log(ev.rule);
})
</code></pre>
<h3 id="urlsinput-url-">urlsInput：存储服务器返回的url并可以渲染默认数据</h3>
<p>使用<code>urlsInput</code>插件，uploader会自动将服务器返回的url插入到一个input上。</p>
<p>需要有个目标容器：</p>
<pre><code class="lang-javascript">    &lt;input type=&quot;hidden&quot; id=&quot;J_Urls&quot; name=&quot;refundImageUrls&quot;&gt;
</code></pre>
<pre><code class="lang-javascript">    uploader.use(&#39;urlsInput&#39;,{target:&#39;.J_Urls&#39;});
</code></pre>
<h4 id="-">配置项（属性）</h4>
<table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th style="width: 100px;">属性名</th>
            <th style="width: 50px;">类型</th>
            <th style="width: 130px;">默认值</th>
            <th style="width: 200px;">是否只读</th>
            <th>描述</th>
        </tr>
        </thead>
        <tbody>
             <tr>
                 <td>target</td>
                 <td>String</td>
                 <td>&#39;&#39;</td>
                 <td>读</td>
                 <td>用于存储文件路径的目标容器</td>
             </tr>
             <tr>
                 <td>urls</td>
                 <td>Array</td>
                 <td>[]</td>
                 <td>读</td>
                 <td>容器内的所有路径</td>
             </tr>
             <tr>
                 <td>split</td>
                 <td>String</td>
                 <td>&quot;,&quot;</td>
                 <td>读/写</td>
                 <td>多个路径间的分隔符</td>
             </tr>
        </tbody>
</table>

<h4 id="urlsinput-">urlsInput的方法</h4>
<p><strong>add(url)</strong>：向input添加路径</p>
<pre><code class="lang-javascript">    var urlsInput = uploader.getPlugin(&#39;urlsInput&#39;);
    urlsInput.add(&#39;http://www.36ria.com/test.jpg&#39;);
</code></pre>
<p><strong>remove(url)</strong>：删除input内的指定路径</p>
<p><strong>isExist(url)</strong>：是否已经存在指定路径</p>
<p><strong>restore()</strong>：添加默认数据到队列</p>
<h3 id="tagconfig-input-">tagConfig：从input上拉取配置覆盖组件配置</h3>
<p>如果你希望可以在html配置组件属性，需要use(&quot;tagConfig&quot;)。</p>
<p>demo可以<a href="http://uploader.apebook.org/tag-config-use.html">猛击这里</a>。</p>
<pre><code class="lang-xml">    &lt;input class=&quot;g-u&quot; id=&quot;J_UploaderBtn&quot; name=&quot;Filedata&quot; type=&quot;file&quot; value=&quot;上传图片&quot;
           action=&quot;upload.php&quot; postData=&#39;{&quot;author&quot;:&quot;minghe&quot;}&#39; max=&quot;3&quot; maxSize=&quot;500&quot;&gt;
</code></pre>
<p><strong>提醒</strong>：html中的配置会覆盖js的配置，这跟1.5前的逻辑相反。</p>
<p><strong>提醒</strong>：postData等价于js配置中的data。</p>
<p>tagConfig的配置覆盖会在主题初始化成功后才执行，如果你的uploader不使用主题，请手动调用覆盖方法：</p>
<pre><code class="lang-javascript">    var tagConfig = uploader.getPlugin(&#39;tagConfig&#39;);
    tagConfig.cover();
</code></pre>
<h3 id="probars-">proBars：进度条集合</h3>
<p><strong>提醒</strong>：proBars是队列中所有的进度条集合，插件还有个ProgressBar子类，对应每个文件的进度条。</p>
<p>进度条插件依赖主题模版中的进度条容器：</p>
<pre><code class="lang-xml">&lt;div class=&quot;J_ProgressBar_{id}&quot;&gt;上传中...&lt;/div&gt;
</code></pre>
<h4 id="probars-">ProBars的配置项</h4>
<table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th style="width: 100px;">属性名</th>
            <th style="width: 50px;">类型</th>
            <th style="width: 130px;">默认值</th>
            <th style="width: 200px;">是否只读</th>
            <th>描述</th>
        </tr>
        </thead>
        <tbody>
             <tr>
                 <td>width</td>
                 <td>Number</td>
                 <td>&#39;auto&#39;</td>
                 <td>读/写</td>
                 <td>进度条的宽度</td>
             </tr>
              <tr>
                  <td>bars</td>
                  <td>Object</td>
                  <td>{}</td>
                  <td>读</td>
                  <td>进度条实例集合</td>
              </tr>
             <tr>
                 <td>isHide</td>
                 <td>Boolean</td>
                 <td>true</td>
                 <td>读/写</td>
                 <td>进度走到100%时是否隐藏</td>
             </tr>
             <tr>
                 <td>speed</td>
                 <td>String</td>
                 <td>0.2</td>
                 <td>读/写</td>
                 <td>进度条跑动速度控制</td>
             </tr>
        </tbody>
</table>

<h4 id="probars-">ProBars的方法</h4>
<p><strong>add(fileId)</strong> ：向集合添加一个进度条</p>
<h3 id="preview-">preview：图片预览插件</h3>
<p><strong>提醒</strong>：该插件在IE10下无效，无效的情况下，主题会使用服务器返回的路径来渲染出图片。</p>
<p><strong>preview(fileInput, imgElem)</strong>：preview只有这个方法，用于渲染本地图片。</p>
<pre><code class="lang-javascript">    var preview = uploader.getPlugin(&#39;preview&#39;);
    var fileInput = uploader.get(&#39;fileInput&#39;);
    preview.preview(fileInput,$img);
</code></pre>
<h3 id="filedrop-">filedrop：文件拖拽上传插件</h3>
<h4 id="filedrop-">Filedrop的配置项</h4>
<table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th style="width: 100px;">属性名</th>
            <th style="width: 50px;">类型</th>
            <th style="width: 130px;">默认值</th>
            <th style="width: 200px;">是否只读</th>
            <th>描述</th>
        </tr>
        </thead>
        <tbody>
             <tr>
                 <td>target</td>
                 <td>NodeList</td>
                 <td>&#39;&#39;</td>
                 <td>读</td>
                 <td>指向模拟按钮</td>
             </tr>
        </tbody>
</table>

<h4 id="filedrop-">Filedrop的方法</h4>
<p><strong>show()/hide()</strong>：显示和隐藏拖拽区域</p>
<h3 id="imagezoom-">imageZoom：图片放大插件</h3>
<p>利用image-dd组件来实现图片放大。</p>
<h3 id="paste-">paste：粘贴上传插件</h3>
<p>v1.5新增插件，读取剪切板的文件数据，触发上传。目前只能用于chrome</p>
<p>请看<a href="http://uploader.apebook.org/paste-demo.html">demo</a>。</p>
<p>模块路径为：<em>kg/uploader/2.0.2/plugins/paste/paste</em></p>
<pre><code>//粘贴上传
uploader.plug(new Paste())
</code></pre><h2 id="q-a">Q&amp;A</h2>
<h4 id="-">如何处理跨域上传？</h4>
<p>目前跨域处理只支持iframe和flash方式，如果遇到需要跨域的情况，推荐设置<code>type:&quot;iframe&quot;</code>。</p>
<p>假设你表单页面的域是：refund.taobao.com，而处理上传的服务器端路径却是upload.taobao.com。</p>
<p>那么将二个页面使用js将域设置为taobao.com：</p>
<pre><code class="lang-xml">&lt;script&gt;document.domain=&quot;taobao.com&quot;;&lt;/script&gt;
</code></pre>
<p>处理上传的服务器返回的内容可以如下：</p>
<pre><code class="lang-xml">&lt;script&gt;document.domain=&quot;taobao.com&quot;;&lt;/script&gt;
{&quot;status&quot;:1,&quot;type&quot;:&quot;ajax&quot;,&quot;name&quot;:&quot;54.png&quot;,&quot;url&quot;:&quot;.\/files\/54.png&quot;}
</code></pre>
<p>脚本部分不用做任何处理，组件会自动处理，只取需要的结果集。</p>
<h4 id="flash-">flash上传进度条不走，上传失败</h4>
<p>在url后面加上ks-debug，看下调试工具控制台输出是否有个“缺少crossdomain.xml”的提示。</p>
<p>crossdomain.xml是flash的安全策略文件，需要放在在域名根目录下，比如应用域名为refund.taobao.com，那么就应该有<a href="http://www.refund.taobao.com/crossdomain.xml，在调试时可以将这个文件代理到本地。">http://www.refund.taobao.com/crossdomain.xml，在调试时可以将这个文件代理到本地。</a></p>
<p>crossdomain.xml的内容可以如下：</p>
<pre><code class="lang-xml">&lt;?xml version=&quot;1.0&quot;?&gt;
&lt;cross-domain-policy&gt;
    &lt;allow-access-from domain=&quot;*&quot;/&gt;
    &lt;!--下面这行代码必须有--&gt;
    &lt;allow-access-from domain=&quot;*.tbcdn.cn&quot;/&gt;
&lt;/cross-domain-policy&gt;
</code></pre>
<p>tbcdn.cn为swf文件所在的位置，安全策略文件需要加上。</p>
<h4 id="flash-">flash上传时，隐藏上传按钮后再显示，上传组件不可用</h4>
<p>flash对象不能设置<code>display:none;</code>，父容器隐藏也是不行的！这点特别留意。</p>
<p>你可以设置<code>position:absolute;top:-2000px</code>，这样的位移方式来处理。</p>

          <div style="display:none;"><script type="text/javascript" src="http://tajs.qq.com/stats?sId=36378479" charset="UTF-8"></script></div>
          <script src="http://docs.kissyui.com/1.4/source/guideline/templates/assets/com.js"></script>
        </div>
      </div>
    </div>
  </body>
</html>